window.addEventListener('load', function () {
  // 获取轮播图片元素集合
  const imageItems = document.querySelectorAll('.bd figure');
  // 获取轮播文本元素集合
  const textItems = document.querySelectorAll('.ban-text li');
  // 获取页码元素集合
  const pageItems = document.querySelectorAll('.hd ul li');
  // 获取左箭头按钮元素
  const prevButton = document.querySelector('.prev');
  // 获取右箭头按钮元素
  const nextButton = document.querySelector('.next');
  let currentIndex = 0;

  // 显示指定索引的轮播项（图片和文本）
  function showSlide(index) {
      imageItems.forEach((item, i) => {
          if (i === index) {
              item.classList.add('active');
          } else {
              item.classList.remove('active');
          }
      });

      textItems.forEach((item, i) => {
          if (i === index) {
              item.classList.add('active');
          } else {
              item.classList.remove('active');
          }
      });

      // 更新页码的高亮显示状态
      updatePageHighlight(index);
  }

  // 更新页码的高亮显示，标记当前轮播项对应的页码
  function updatePageHighlight(index) {
      pageItems.forEach((item, i) => {
          if (i === index) {
              item.classList.add('active');
          } else {
              item.classList.remove('active');
          }
      });
  }

  // 切换到下一张轮播项
  function nextSlide() {
      currentIndex++;
      if (currentIndex >= imageItems.length) {
          currentIndex = 0;
      }
      showSlide(currentIndex);
  }

  // 切换到上一张轮播项
  function prevSlide() {
      currentIndex--;
      if (currentIndex < 0) {
          currentIndex = imageItems.length - 1;
      }
      showSlide(currentIndex);
  }

  // 跳转到指定页码对应的轮播项
  function goToPage(index) {
      currentIndex = index;
      showSlide(currentIndex);
  }

  // 初始显示第一张轮播项（图片和文本）以及对应的页码高亮
  showSlide(currentIndex);

  // 给页码添加点击事件，点击页码切换到对应轮播项
  pageItems.forEach((item, index) => {
      item.addEventListener('click', function () {
          goToPage(index);
      });
  });

  // 给左箭头按钮添加点击事件，点击切换到上一张轮播项
  prevButton.addEventListener('click', prevSlide);

  // 给右箭头按钮添加点击事件，点击切换到下一张轮播项
  nextButton.addEventListener('click', nextSlide);

  // 自动轮播，每隔3秒切换到下一张
  setInterval(nextSlide, 3000);
});